<template>
  <div class="pokemon-detail">
    <el-page-header @back="router.go(-1)" title="返回">
      <template #content>
        <span>宝可梦详情</span>
      </template>
    </el-page-header>

    <div v-if="loading" style="text-align: center; padding: 50px;">
      <el-skeleton :rows="10" animated />
    </div>

    <el-card v-else-if="pokemon" style="margin-top: 20px;">
      <el-row :gutter="30">
        <el-col :span="8" style="text-align: center;">
          <img
            :src="pokemon.sprites?.other?.['official-artwork']?.front_default || pokemon.sprites?.front_default"
            :alt="pokemon.name"
            style="max-width: 100%; height: 300px; object-fit: contain;"
          />
          <h2 style="margin: 20px 0 10px 0;">
            {{ pokemon.name }}
          </h2>
          <div style="color: #999; margin-bottom: 20px;">
            #{{ pokemon.id.toString().padStart(3, '0') }}
          </div>
        </el-col>

        <el-col :span="16">
          <h3>基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="身高">
              {{ (pokemon.height / 10).toFixed(1) }} m
            </el-descriptions-item>
            <el-descriptions-item label="体重">
              {{ (pokemon.weight / 10).toFixed(1) }} kg
            </el-descriptions-item>
          </el-descriptions>

          <h3 style="margin-top: 30px;">属性</h3>
          <div style="margin: 10px 0;">
            <el-tag
              v-for="type in pokemon.types"
              :key="type.slot"
              style="margin: 0 5px 5px 5px;"
            >
              {{ type.type.name }}
            </el-tag>
          </div>

          <h3 style="margin-top: 30px;">能力值</h3>
          <div style="margin-top: 15px;">
            <div v-for="stat in pokemon.stats" :key="stat.stat.name" style="margin-bottom: 10px;">
              <div style="display: flex; align-items: center; margin-bottom: 5px;">
                <span style="width: 80px;">{{ stat.stat.name }}:</span>
                <el-progress
                  :percentage="Math.min(100, stat.base_stat)"
                  :stroke-width="12"
                  style="flex: 1; margin: 0 10px;"
                />
                <span style="width: 40px;">{{ stat.base_stat }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div v-else style="text-align: center; padding: 50px;">
      <el-empty description="宝可梦未找到" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const pokemon = ref<any>(null)
const loading = ref(false)

// 获取宝可梦详情
const loadPokemonDetail = async () => {
  try {
    loading.value = true
    const id = route.params.id
    const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`)
    pokemon.value = response.data
  } catch (error) {
    console.error('加载宝可梦详情失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadPokemonDetail()
})
</script>
